/*顶部垂直轮播*/

var mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    autoplay: true
});



/*导航移入移出事件*/
var nav_1 = document.querySelectorAll(".nav_hov");
var cont = document.querySelectorAll(".nav_down_cont");
for(var a = 0; a < nav_1.length; a++){
    nav_1[a].index = a;
    nav_1[a].addEventListener("mouseover", function () {
        for(var b = 0; b < cont.length; b++){
            nav_1[b].classList.remove('nav_a');
            cont[b].classList.remove('nav_a');
        }
        this.classList.add('nav_a');
        cont[this.index].classList.add('nav_a');
    });
    nav_1[a].addEventListener("mouseleave", function () {
        for(var b = 0; b < cont.length; b++){
            nav_1[b].classList.remove('nav_a');
            cont[b].classList.remove('nav_a');
        }
        this.classList.remove('nav_a');
        cont[this.index].classList.remove('nav_a');
    });

}
var nav_text = document.querySelectorAll(".nav_hov>a>span");
for(var c = 0; c <cont.length; c++){
    cont[c].index = c;
    cont[c].addEventListener("mouseover",function(){
        this.classList.add('nav_a');
        for(var d = 0; d < nav_text.length; d++){
            nav_text[d].index = d;
            console.log(nav_text[this.index]);
            nav_text[this.index].style.color = "#cb9864";
        }
    });
    cont[c].addEventListener("mouseleave",function(){
        this.classList.remove('nav_a');
        for(var d = 0; d < nav_text.length; d++){
            nav_text[d].index = d;
            nav_text[this.index].style.color = "#000";
        }
    })
}


//彩妆商品轮播图
var appendNumber = 4;
var prependNumber = 1;
var swiper1 = new Swiper('.swiper-container1', {
    slidesPerView: 3,
    centeredSlides: true,
    spaceBetween: 30,
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    }
});
//彩妆商品移入移出事件
var make = document.querySelectorAll(".make_img");
var make_btn = document.querySelectorAll(".make_btn");
if (make !== null) {
    for(var i = 0; i < make.length; i++){
        make[i].index = i;
        make[i].addEventListener("mouseover", function () {
                make_btn[this.index].style.display = "block";
        });
        make[i].addEventListener("mouseleave", function () {
            for(var b = 0 ; b<make_btn.length;b++){
                make_btn[b].style.display = "none";
            }
        });
    }

}

//搜索发现的json循环

var arr1 = document.querySelector("#arr");
if (arr1 !== null) {
    new Vue({
        el: "#arr",
        data: {
            lists: ''
        },
        mounted(){
            axios
                .get("json/date.json")
                .then(response => this.lists = response.data.lists)
                .catch(function (error) {
                    console.log(error);
                })
        }
    });
}

/*回到顶部*/
var box = document.querySelector("#box");
var toTop = document.querySelector("#totop");
var nav = document.querySelector("#nav");
console.log(document.body.scrollTop || document.documentElement.scrollTop);
window.onscroll = function () {
    if (document.body.scrollTop > 500 || document.documentElement.scrollTop >500) {
        box.style.display = "block";
    } else {
        box.style.display = "none";
    }
    /*导航事件*/
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
        nav.classList.add('nav-top');
        document.querySelectorAll(".nav_down_cont")[0].style.top = "50px";
        document.querySelectorAll(".nav_down_cont")[1].style.top = "50px";
        document.querySelectorAll(".nav_down_cont")[2].style.top = "50px";
        for(var f = 0; f<cont.length; f++){
            cont[f].style.position = "fixed";
        }

    } else {
        nav.classList.remove('nav-top');
        document.querySelectorAll(".nav_down_cont")[0].style.top = "222px";
        document.querySelectorAll(".nav_down_cont")[1].style.top = "222px";
        document.querySelectorAll(".nav_down_cont")[2].style.top = "222px";
        for(var z = 0; z<cont.length; z++){
            cont[z].style.position = "absolute";
        }

    }


};
//回到顶部事件
toTop.addEventListener("click", function () {
    window.scrollTo(0, 0);
    window.scrollTo({
        top: 0,
        /*behavior: 'smooth'*/
    });
});








